<template>
  <div class="box">
    <div class="head">
      <van-icon class="arrow-left" name="arrow-left" @click="goBack" /> 订单查看
    </div>
    <div class="content">
      <van-tabs v-model="active">
        <van-tab title="全部订单">
          <van-card
            :key="item.proid"
            v-for="item in goodslist"
            :price="item.originprice"
            :title="item.proname"
            :thumb="item.img1"
          >
            <template #footer>
              <van-button size="mini">去支付</van-button>
            </template>
          </van-card>
        </van-tab>
        <van-tab title="待收货">
          <van-card
            :key="item.proid"
            v-for="item in goodslist"
            :price="item.originprice"
            :title="item.proname"
            :thumb="item.img1"
          >
            <template #footer>
              <van-button size="mini">去支付</van-button>
            </template>
          </van-card>
        </van-tab>
        <van-tab title="待付款"></van-tab>
        <van-tab title="待评价"></van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 2,
      goodslist:[]
    };
  },
  methods: {
    goBack() {
      this.$router.back();
    },
  },
  created() {
    this.name = this.$route.query.name;
    this.token = sessionStorage.getItem("token");
    this.userid = sessionStorage.getItem("userid");
    this.time = sessionStorage.getItem("time");

    console.log("userid", this.userid);

    this.$service({
      method: "get",
      url: "api/user/orderlist",
      headers: { token: this.token },
      params: {
        userid: this.userid,
      },
    }).then((res) => {
      console.log("res.data", res.data.data);

      if (res.data.code == 200) {
        this.goodslist = res.data.data;
      }
    });
  },
};
</script>
<style scoped>
.head {
  position: relative;
  height: 3rem;
  background-color: antiquewhite;
  text-align: center;
  line-height: 3rem;
}
.arrow-left {
  position: absolute;
  top: 1rem;
  left: 1rem;
}
.box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #efefef;
}
.content {
  flex: 1;
  overflow: auto;
}
</style>